﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CkFinder</title>     
    <script type="text/javascript" src="/ck/ckfinder/ckfinder.js"></script>
</head>
<body>

	<h1>
		CKFinder - Sample - Popups<br />
	</h1>
	<hr />
	<p>
		CKFinder may be opened in a popup. You may define a custom JavaScript function to be called when
		an image is selected (double-clicked).</p>
	<p>
		<strong>Selected File URL</strong><br/>
		<input id="xFilePath" name="FilePath" type="text" size="60" />
		<input type="button" value="Browse Server" onclick="BrowseServer( 'Files:/', 'xFilePath' );" />
	</p>
	<p>
		<strong>Selected Image URL</strong><br/>
		<input id="xImagePath" name="ImagePath" type="text" size="60" />
		<input type="button" value="Browse Server" onclick="BrowseServer( 'Images:/', 'xImagePath' );" />
	</p>
	<div id="preview" style="display:none">
		<strong>Selected Thumbnails</strong><br/>
		<div id="thumbnails"></div>
	</div>

</body>
</html>
<script type="text/javascript">
  

     function ShowFileInfo(fileUrl, data) {
         alert('The selected thumbnail URL is "' + fileUrl + '"');

         var formatDate = function (date) {
             return date.substr(0, 4) + "-" + date.substr(4, 2) + "-" + date.substr(6, 2) + " " + date.substr(8, 2) + ":" + date.substr(10, 2);
         }

         alert('The selected thumbnail URL is: "' + data['thumbnailUrl'] + '"');
         alert('The URL of full size image is: "' + data['fileUrl'] + '"');
         alert('The size of selected file is: "' + data['fileSize'] + 'KB"');
         alert('The selected file was last modifed on: "' + formatDate(data['fileDate']) + '"');
         alert('The data passed to the function is: "' + data['selectThumbnailFunctionData'] + '"');
     }

     function BrowseServer(startupPath, functionData) {
         // You can use the "CKFinder" class to render CKFinder in a page:
         var finder = new CKFinder();

         // The path for the installation of CKFinder (default = "/ckfinder/").
        // finder.basePath = '../';

         //Startup path in a form: "Type:/path/to/directory/"
       //  finder.startupPath = startupPath;

         // Name of a function which is called when a file is selected in CKFinder.
         finder.selectActionFunction = SetFileField;

         // Additional data to be passed to the selectActionFunction in a second argument.
         // We'll use this feature to pass the Id of a field that will be updated.
         finder.selectActionData = functionData;

         // Name of a function which is called when a thumbnail is selected in CKFinder.
         finder.selectThumbnailActionFunction = ShowThumbnails;

         // Launch CKFinder
         finder.popup();
     }

     // This is a sample function which is called when a file is selected in CKFinder.
     function SetFileField(fileUrl, data) {
         document.getElementById(data["selectActionData"]).value = fileUrl;
     }

     // This is a sample function which is called when a thumbnail is selected in CKFinder.
     function ShowThumbnails(fileUrl, data) {
         // this = CKFinderAPI
         var sFileName = this.getSelectedFile().name;
         document.getElementById('thumbnails').innerHTML +=
			'<div class="thumb">' +
				'<img src="' + fileUrl + '" />' +
				'<div class="caption">' +
					'<a href="' + data["fileUrl"] + '" target="_blank">' + sFileName + '</a> (' + data["fileSize"] + 'KB)' +
				'</div>' +
			'</div>';

         document.getElementById('preview').style.display = "";
         document.getElementById("xImagePath").value = data["fileUrl"];
         // It is not required to return any value.
         // When false is returned, CKFinder will not close automatically.
         return false;
     }
	</script>

